<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .test-container {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
        }
        
        .qr-container {
            margin: 20px 0;
            text-align: center;
        }
        
        input[type="text"] {
            width: 300px;
            padding: 8px;
            margin: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        button {
            padding: 8px 16px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            background: #007bff;
            color: white;
            cursor: pointer;
        }
        
        button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <h1>二维码功能测试</h1>
    
    <div class="test-container">
        <h3>二维码测试</h3>
        <input type="text" id="qrText" placeholder="输入要生成二维码的内容" value="测试二维码内容">
        <button onclick="generateQR()">生成二维码</button>
        <button onclick="clearQR()">清空</button>
        
        <div class="qr-container">
            <div id="qrcode" style="display: inline-block;"></div>
        </div>
    </div>
    
    <div class="test-container">
        <h3>测试结果</h3>
        <div id="testResult">等待测试...</div>
    </div>

    <script>
    // 简化版QRCode.js - 最小化实现
    (function() {
        function QRCode(element, options) {
            if (typeof options === 'string') {
                options = { text: options };
            }
            
            this.options = {
                width: 256,
                height: 256,
                colorDark: "#000000",
                colorLight: "#ffffff",
                text: ""
            };
            
            for (var key in options) {
                this.options[key] = options[key];
            }
            
            if (typeof element === "string") {
                element = document.getElementById(element);
            }
            
            this.element = element;
            
            if (this.options.text) {
                this.makeCode(this.options.text);
            }
        }
        
        QRCode.prototype = {
            makeCode: function(text) {
                this.element.innerHTML = "";
                this.createQRCode(text);
            },
            
            createQRCode: function(text) {
                // 创建一个简单的二维码图案
                var size = 21; // 21x21的二维码矩阵
                var canvas = document.createElement('canvas');
                canvas.width = this.options.width;
                canvas.height = this.options.height;
                
                var ctx = canvas.getContext('2d');
                var cellSize = this.options.width / size;
                
                // 生成简单的二维码图案
                var pattern = this.generatePattern(text, size);
                
                // 绘制二维码
                for (var row = 0; row < size; row++) {
                    for (var col = 0; col < size; col++) {
                        ctx.fillStyle = pattern[row][col] ? this.options.colorDark : this.options.colorLight;
                        ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
                    }
                }
                
                this.element.appendChild(canvas);
            },
            
            generatePattern: function(text, size) {
                var pattern = [];
                for (var i = 0; i < size; i++) {
                    pattern[i] = [];
                    for (var j = 0; j < size; j++) {
                        pattern[i][j] = false;
                    }
                }
                
                // 添加定位图案（左上角）
                this.addFinderPattern(pattern, 0, 0);
                // 添加定位图案（右上角）
                this.addFinderPattern(pattern, 0, size - 7);
                // 添加定位图案（左下角）
                this.addFinderPattern(pattern, size - 7, 0);
                
                // 添加时序图案
                for (var i = 8; i < size - 8; i++) {
                    pattern[6][i] = (i % 2 === 0);
                    pattern[i][6] = (i % 2 === 0);
                }
                
                // 根据文本内容生成数据图案
                var hash = this.simpleHash(text);
                for (var i = 0; i < size; i++) {
                    for (var j = 0; j < size; j++) {
                        if (pattern[i][j] === null || pattern[i][j] === undefined) {
                            // 使用哈希值和位置生成图案
                            pattern[i][j] = ((hash + i * size + j) % 3) === 0;
                        }
                    }
                }
                
                return pattern;
            },
            
            addFinderPattern: function(pattern, startRow, startCol) {
                var finderPattern = [
                    [1,1,1,1,1,1,1],
                    [1,0,0,0,0,0,1],
                    [1,0,1,1,1,0,1],
                    [1,0,1,1,1,0,1],
                    [1,0,1,1,1,0,1],
                    [1,0,0,0,0,0,1],
                    [1,1,1,1,1,1,1]
                ];
                
                for (var i = 0; i < 7; i++) {
                    for (var j = 0; j < 7; j++) {
                        if (startRow + i < pattern.length && startCol + j < pattern[0].length) {
                            pattern[startRow + i][startCol + j] = finderPattern[i][j] === 1;
                        }
                    }
                }
                
                // 添加分隔符
                for (var i = 0; i < 8; i++) {
                    for (var j = 0; j < 8; j++) {
                        var row = startRow + i - 1;
                        var col = startCol + j - 1;
                        if (row >= 0 && row < pattern.length && col >= 0 && col < pattern[0].length) {
                            if (i === 0 || i === 7 || j === 0 || j === 7) {
                                if (pattern[row][col] === undefined) {
                                    pattern[row][col] = false;
                                }
                            }
                        }
                    }
                }
            },
            
            simpleHash: function(str) {
                var hash = 0;
                for (var i = 0; i < str.length; i++) {
                    var char = str.charCodeAt(i);
                    hash = ((hash << 5) - hash) + char;
                    hash = hash & hash; // 转换为32位整数
                }
                return Math.abs(hash);
            }
        };
        
        // 兼容性设置
        QRCode.CorrectLevel = {
            L: 1,
            M: 0,
            Q: 3,
            H: 2
        };
        
        window.QRCode = QRCode;
    })();

    // 测试函数
    var qrCodeInstance = null;
    
    function generateQR() {
        var text = document.getElementById('qrText').value;
        var container = document.getElementById('qrcode');
        
        if (!text.trim()) {
            alert('请输入要生成二维码的内容');
            return;
        }
        
        try {
            container.innerHTML = '';
            
            // 使用在线API生成二维码
            var qrApiUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(text);
            var imgHtml = '<img src="' + qrApiUrl + '" alt="二维码" style="width: 200px; height: 200px; border: 1px solid #ddd;" onerror="generateLocalQR(\'' + text.replace(/'/g, "\\'") + '\')">';
            container.innerHTML = imgHtml;
            
            document.getElementById('testResult').innerHTML = 
                '<span style="color: green;">✓ 二维码生成成功！</span><br>' +
                '内容: ' + text + '<br>' +
                '时间: ' + new Date().toLocaleString() + '<br>' +
                '方法: 在线API';
                
        } catch (e) {
            console.error('二维码生成失败:', e);
            document.getElementById('testResult').innerHTML = 
                '<span style="color: red;">✗ 二维码生成失败: ' + e.message + '</span>';
        }
    }
    
    function generateLocalQR(text) {
        var container = document.getElementById('qrcode');
        try {
            container.innerHTML = '';
            if (typeof QRCode !== 'undefined') {
                qrCodeInstance = new QRCode(container, {
                    text: text,
                    width: 200,
                    height: 200,
                    colorDark: "#000000",
                    colorLight: "#ffffff"
                });
                
                document.getElementById('testResult').innerHTML = 
                    '<span style="color: blue;">✓ 二维码生成成功！</span><br>' +
                    '内容: ' + text + '<br>' +
                    '时间: ' + new Date().toLocaleString() + '<br>' +
                    '方法: 本地库';
            } else {
                container.innerHTML = '<div style="width: 200px; height: 200px; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; background: #f9f9f9; font-size: 14px; text-align: center; color: #666; word-wrap: break-word; padding: 10px;">二维码内容:<br/>' + text + '</div>';
                
                document.getElementById('testResult').innerHTML = 
                    '<span style="color: orange;">⚠ 使用文本占位符</span><br>' +
                    '内容: ' + text + '<br>' +
                    '时间: ' + new Date().toLocaleString() + '<br>' +
                    '方法: 文本显示';
            }
        } catch (e) {
            console.error('本地二维码生成失败:', e);
            container.innerHTML = '<div style="color: red; padding: 20px;">二维码生成失败</div>';
            document.getElementById('testResult').innerHTML = 
                '<span style="color: red;">✗ 本地二维码生成失败: ' + e.message + '</span>';
        }
    }
    
    function clearQR() {
        document.getElementById('qrcode').innerHTML = '';
        document.getElementById('testResult').innerHTML = '已清空';
    }
    
    // 页面加载完成后自动测试
    window.onload = function() {
        console.log('QRCode库加载状态:', typeof QRCode);
        generateQR(); // 自动生成一个测试二维码
    };
    </script>
</body>
</html> 